

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html>
<head>
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/css/foro/style-foro.css" />
<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/Js/jQuery-File-Upload/uploadfile.css" />

<script type="text/javascript"
	src="${pageContext.request.contextPath}/Js/jQuery-File-Upload/jquery.uploadfile.js"></script>
	


<script type="text/javascript">
	var idTopico = "";
	var idComentario = "";
	var idForo = "";
	var uploadObj = "";
	
	var insertReplay = function(id_Topico, id_Comentario, id_foro) {
		idTopico = id_Topico;
		idComentario = id_Comentario;
		idForo = id_foro;
		$('#buscar').bPopup();
	};
	
	var insertComent = function() {
	
		$('#addComment').bPopup();
	};
	
	var popUpFiles = function(id_Topico, id_Comentario, idForo) {
		idTopico = id_Topico;
		idComentario = id_Comentario;
		$('#insertIdTopico').val(idTopico);
		$('#insertIdComentario').val(idComentario);
// 		$('#adjuntos').bPopup();
		$('#adjuntos').bPopup({
// 			 onOpen: function() { 
// 				 $("#adjuntos").append("<div id=\"mulitplefileuploader\">Upload</div>");   
// 				 $("#adjuntos").append("<div id=\"status\"></div>");   
			 
// 			 },   
               onClose: function() {
            	   
            	   $.ajax({
       				url : 'afterInsertFile', // action to be perform 
       				type : 'POST',
       				data : {
       					idTopico : idTopico,
       					idComentario : idComentario,
       					reply : $('#txtArea').val(),

       				},
       				dataType : 'html',
       				success : function(html) {
       					
       					$('#comentarios').html(html);
       				},
       				error : function(xhr, ajaxOptions, thrownError) {
       					alert('An error occurred! ' + thrownError);
       				},
       			});
                }
        });
		
		
		
		var settings={
		    url: "guarda",
		    formData: {"idTopico":idTopico,"idComentario": idComentario, "idForo": idForo},
		    dragDrop:true,
		    multiple: false,
		    maxFileSize : 2097151,
		    showPreivew: true,
		    fileName: "myFile",
		    allowedTypes:"jpg,png,pdf,zip,7z",	
		    returnType:"json",
// 		    maxFileCount
			onSuccess:function(files,data,xhr)
		    {
				if(data.result == "imgExist" ){
                	 $(".ajax-file-upload-statusbar").remove();
                	 alert("el comentario ya cuenta con imagen");
                }else if(data.result == "fileExist"){
                	$(".ajax-file-upload-statusbar").remove();
               		 alert("el comentario ya cuenta con archivo");
                }
		    },
		    showDelete:false,
		    deleteCallback: function(data,pd)
			{
		    for(var i=0;i<data.length;i++)
		    {
		        $.post("delete.php",{op:"delete",name:data[i]},
		        function(resp, textStatus, jqXHR)
		        {
		            //Show Message  
		            $("#status").append("<div>File Deleted</div>");      
		        });
		     }      
		    
		    pd.statusbar.hide(); //You choice to hide/not.

		}
		};
		$("#adjuntos").empty();
		 $("#adjuntos").append("<div id=\"mulitplefileuploader\">Upload</div>");   
		 $("#adjuntos").append("<div id=\"status\"></div>");   

		
		
		uploadObj = $("#mulitplefileuploader").uploadFile(settings);
		
	
			
	};

	var displayImg = function(urlImg) {

// 		$('#imagesComment').bPopup();
// 		
		 
		 $('#imagesComment').bPopup({
	            content:'image', //'ajax', 'iframe' or 'image'
	            contentContainer:'.content',
// 	            loadUrl:"http://www.kn-portal.com/fileadmin/user_upload/documents/road_rail/images/Overland_Campaign/KN-PharmaChain-with-timestamp.png"
	            loadUrl: urlImg
	        });
	           
		 
		 $("#imagesComment").css("width", "860");
		 $("#imagesComment").css("height", "680");
	           

	
	};

	jQuery(document).ready(function() {
		
			

		$.ajax({
			url : 'infoTopic', // action to be perform 
			type : 'POST',
			dataType : 'html',
			success : function(html) {
				$('#comentarios').html(html);
			},
			error : function(xhr, ajaxOptions, thrownError) {
				alert('An error occurred! ' + thrownError);
			},
		});

		$('#saveReply').click(function() {
			$.ajax({
				url : 'saveReply', // action to be perform 
				type : 'POST',
				data : {
					idTopico : idTopico,
					idComentario : idComentario,
					idForo : idForo,
					reply : $('#txtArea').val(),

				},
				dataType : 'html',
				success : function(html) {
					$('#buscar').bPopup().close();
					$('#comentarios').html(html);
				},
				error : function(xhr, ajaxOptions, thrownError) {
					alert('An error occurred! ' + thrownError);
				},
			});

		});
		
		$('#saveComent').click(function() {
			$.ajax({
				url : 'insertComment', // action to be perform 
				type : 'POST',
				data : {
					
					reply : $('#txtAreaComm').val(),

				},
				dataType : 'html',
				success : function(html) {
					$('#addComment').bPopup().close();
					$('#comentarios').html(html);
				},
				error : function(xhr, ajaxOptions, thrownError) {
					alert('An error occurred! ' + thrownError);
				},
			});

		});

	});

	$(".txtArea").focus(function() {
		$(".name-help").slideDown(500);
	}).blur(function() {
		$(".name-help").slideUp(500);
	});

	$(".email").focus(function() {
		$(".email-help").slideDown(500);
	}).blur(function() {
		$(".email-help").slideUp(500);
	});
</script>



<title>Main ho</title>
</head>
<body>

	<div id="comentarios"></div>



	<div id="buscar" class="buscarKN" style="display: none;">


		<div>
			<div class="wrapper">
				<h1>Insert Comment</h1>
				<br />



<%-- 					<s:form action="guarda" namespace="/" method="POST" enctype="multipart/form-data"> --%>
<%-- 				  		<s:hidden id="insertIdTopico" name="idTopico" value=""/>  --%>
<%-- 				  		<s:hidden id="insertIdComentario" name="idComentario" value=""/>  --%>
<%-- <%-- 				 		<s:textarea id="txtArea" cssClass="txtArea" name="reply"></s:textarea> --%> --%>
<%-- <%-- 						<s:file label="File 1" name="imgReplyFile" size="40" /> --%> --%>
<%-- <%-- 						<s:file label="File 2" name="fileReplyFile" size="40" /> --%> --%>


<%-- <%-- 				<s:submit value="ok" name="submit" /> --%> --%>

<%-- 				</s:form> --%>


				
					<textarea id="txtArea" class="txtArea"> </textarea>
					<div>
						<p class="name-help">Please enter your comment.</p>
					</div>
					<!-- 					<input type="email" class="email" placeholder="Email"> -->
					<!-- 					<div> -->
					<!-- 						<p class="email-help">Please enter your current email address.</p> -->
					<!-- 					</div> -->
					<input type="submit" class="submit"  id="saveReply" value="Submit">
			
			</div>



​


		</div>

	</div>
	
	
	
	<div id="addComment" class="buscarKN" style="display: none;">


		<div>
			<div class="wrapper">
				<h1>Insert Comment</h1>
				<br />


				
					<textarea id="txtAreaComm" class="txtArea"> </textarea>
					<div>
						<p class="name-help">Please enter your comment.</p>
					</div>
				
					<input type="submit" class="submit"  id="saveComent" value="Submit">
			
			</div>



​


		</div>

	</div>

	<!-- 	div adjuntos -->


	<div id="adjuntos" class="buscarKN" style="display: none;">


		</div>

	</div>
	
	
	<div id="imagesComment"  style="display: none; height: 485px; width: 640px;">
	<div class="content" style="height: auto; width: auto;">
    
	</div>

	</div>
</body>
</html>
